<template>
  <div class="table-component">
    <el-table ref="attributeTable" class="table" :data="controlMode" :row-style="{ height: '60px' }"
      :header-row-style="{ height: '60px' }" style="border-bottom: none; margin-bottom: 0">
      <el-table-column property="mode" label="控制方式" align="left"></el-table-column>
    </el-table>

    <el-table ref="attributeTable" class="table" :data="actions" :row-style="{ height: '60px' }"
      :header-row-style="{ height: '60px' }" style="border-top: none" :height="545">
      <el-table-column type="index" label="功能ID" width="100" align="center"></el-table-column>
      <el-table-column property="name" label="功能名" align="center">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column property="year" label="年" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.year" placeholder="请选择">
            <el-option label="all" value="all"></el-option>
            <el-option :label="currentYear" :value="currentYear"></el-option>
            <el-option :label="nextYear" :value="nextYear"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="month" label="月" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.month" placeholder="请选择">
            <el-option label="all" value="all"></el-option>
            <el-option v-for="(o, i) in 12" :key="i" :label="o" :value="o"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="day" label="日" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.day" placeholder="请选择">
            <el-option label="all" value="all"></el-option>
            <el-option v-for="(o, i) in 31" :key="i" :label="o" :value="o"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="hour" label="时" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.hour" placeholder="请选择">
            <el-option label="all" value="all"></el-option>
            <el-option v-for="(o, i) in 24" :key="i" :label="o - 1" :value="o - 1"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column property="min" label="分" align="center">
        <template #default="scope">
          <el-select v-model="scope.row.min" placeholder="请选择">
            <el-option v-for="o in 60" :key="o" :label="o - 1" :value="o - 1"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" size="medium" :disabled="actions.length === 1" @click="handledelactions(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-button class="button circle-plus-button" size="medium" icon="el-icon-circle-plus-outline"
      @click="handleAddactions">
      新增
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: '',
      controlMode: [],
      actions: [],
      device: {
        // 本地保存的数据
        cid: '',
        controlMode: {},
        actions: [],
      },
      currentDate: new Date(),
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear();
    },
    nextYear() {
      return this.currentDate.getFullYear() + 1;
    }
  },
  watch: {
    controlMode: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue)
        this.device.controlMode = {
          communicationId: this.cid,
          communication: newValue[0].mode,
        }
        sessionStorage.setItem('T007', JSON.stringify(this.device))
      },
      deep: true,
      // immediate: true,
    },
    actions: {
      handler(newValue, oldValue) {
        // console.log(newValue, oldValue)
        this.device.actions = newValue.map((element) => {
          let obj = {
            communication: 'time',
            communicationId: this.cid, //通信方式id，与通信方式对应，每个设备内，唯一
            action: element.name, //行为名称
            name: element.name,
            action_code: 'time' + element.name,
            content: `${element.year}-${element.month}-${element.day}-${element.hour}-${element.min}`,
          }
          return obj
        })
        sessionStorage.setItem('T007', JSON.stringify(this.device))
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    show(id, data) {
      // console.log(id);
      // console.log(data);
      this.cid = id
      this.device.cid = id
      // 是否有回显值
      if (data) {
        // 是否有控制方式
        if (data.config) {
          let config = JSON.parse(data.config)
          config.forEach((element) => {
            if (element.communicationId == id) {
              let obj = { mode: element.communication }
              this.controlMode.push(obj)
            }
          })
        }
        if (data.actions) {
          let actions = JSON.parse(data.actions)
          actions.forEach((element) => {
            if (element.communicationId == id) {
              let content = element.content;
              // console.log(content);
              let [year, month, day, hour, min] = element.content.split("-");
              let obj = {
                name: element.name,
                year: year,
                month: month,
                day: day,
                hour: hour,
                min: min,
              }
              this.actions.push(obj)
            }
          })
        }
      }

      // 如果没有默认值
      if (this.controlMode.length < 1) {
        this.controlMode = [{ mode: 'time' }]
      }
      if (this.actions.length < 1) {
        // this.actions = [{ name: '上课', year: "all", month: "all",day:"all",hour:"",min:0 }]
        this.actions = [{ name: '上课', }]
      }
    },
    // 新增功能
    handleAddactions() {
      let obj = {
        name: '',
      }
      this.actions.push(obj)
    },
    // 删除功能
    handledelactions(row) {
      if (this.actions.length > 1) {
        const newArr = this.actions.filter((item) => {
          return item.name != row.name
        })
        this.actions = newArr
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  width: 100%;
  margin-bottom: 20px;
}

.table-component {
  text-align: center;

  .table {
    border: 1px solid #ebeef5;
    box-sizing: border-box;
  }

  .circle-plus-button {
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    border-color: transparent;
    margin: 0;
  }
}

.checkbox-group {
  width: 100%;
  text-align: left;
}
</style>
